<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.box {
				width: 300px;
				margin: 50px auto;
			}
			
			tr td {
				border: 1px solid gainsboro;
				padding-left: 10px;
			}
			
			tr th {
				border: 1px solid gainsboro;
				border-collapse: collapse;
				background-color: lightskyblue;
			}
			
			table {
				width: 280px;
				border-collapse: collapse;
			}
			tbody tr {
            background-color: lightgrey;
        }

        tbody tr:hover {
            cursor: pointer;
            background-color: ghostwhite;
        }
		</style>
	</head>

	<body>
		<div class="box">
			<table>
				<tr>
					<th><input type="checkbox" id="thtitle" /></th>
					<th>菜名</th>
					<th>饭店</th>
				</tr>
				<tbody id="tbody1">
					
					<tr>
					<td><input type="checkbox" /></td>
					<td>地三鲜</td>
					<td>田老板</td>
				</tr>
				<tr>
					<td><input type="checkbox" /></td>
					<td>西红柿鸡蛋</td>
					<td>田老板</td>
				</tr>
				<tr>
					<td><input type="checkbox" /></td>
					<td>醋溜土豆丝</td>
					<td>田老板</td>
				</tr>
				<tr>
					<td><input type="checkbox" /></td>
					<td>萝卜干炒黄豆儿</td>
					<td>田老板</td>
				</tr>
				</tbody>
				
			</table>
		</div>
		<script>
			window.onload =function(){
			var toptit = document.getElementById("thtitle");
            var tbody1 = document.getElementById("tbody1");
            var bArr = tbody1.getElementsByTagName("input");
//          alert(bArr.length);
            toptit.onclick = function (){
            	 for(var i=0;i<bArr.length;i++){
                    bArr[i].checked = this.checked;
                }
            }
            
			}
			
			for(var i=0;i<bArr.length;i++){
                bArr[i].onclick = function () {
                    var bool = true;
                  
                    for(var j=0;j<bArr.length;j++){
                        if(bArr[j].checked === false){
                            bool = false;
                        }
                    }
                    toptit.checked = bool;
                }
            }
		</script>
	</body>

</html>